<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <meta name="generator" content="Hugo 0.98.0" />

  
  <meta name="description" content="走在通往幸福的路上">
  

  
  <link rel="apple-touch-icon" sizes="180x180" href="https://blog.v5u.win/apple-touch-icon.png">

  
  <link rel="icon" type="image/png" sizes="32x32" href="https://blog.v5u.win/favicon-32x32.png">

  
  <link rel="icon" type="image/png" sizes="16x16" href="https://blog.v5u.win/favicon-16x16.png">

  
  <link rel="manifest" href="https://blog.v5u.win/site.webmanifest">

  
  <link rel="mask-icon" href="https://blog.v5u.win/safari-pinned-tab.svg" color="">

  <meta name="msapplication-TileColor" content="">

  <meta name="theme-color" content="">

  
  <link rel="stylesheet" href="https://blog.v5u.win/css/bootstrap.min.css" />

  
  <title>Flutter 组件 | 为吾优</title>
  

  <style>
body {
  min-width: 300px;
}

.custom-navbar {
  margin-bottom: 1em;
  height: 60px;
}

.custom-navbar a {
  display: inline-block; 
  padding: 18px 0;
  margin-right: 1em; 
  font-weight: bold; 
}

.custom-navbar a:hover,
.custom-navbar a:focus {
  text-decoration: none; 
}

@media print {
  .custom-navbar {
    display: none;
  }
}

article {
  padding-bottom: 1em;
}

img {
  max-width: 100%;
}


body {
  background-color: #fff;
}



body {
  color: #212529;
}



a {
  color: #007bff;
}



a:hover,
a:focus {
  color: #0056b3;
}



.custom-navbar {
  background-color: #212529;
}



.custom-navbar a {
  color: rgba(255,255,255,.75);
}



.custom-navbar a:hover,
.custom-navbar a:focus {
  color: rgba(255,255,255,1);
}



.container {
  max-width: 800px;
}





</style>
</head>

<body>
  <nav class="custom-navbar">
  <div class="container">
    
    <a href="/">文章</a>
    
    <a href="/tags/">标签</a>
    
    <a href="/about/">关于</a>
    
    <a href="/index.xml">RSS</a>
    
  </div>
</nav>
  
  <div class="container">
    <article>
      <h1>Flutter 组件</h1>
<p>[TOC]</p>
<pre tabindex="0"><code>- 基础组件
  - Widget 与 Element
  - StatelessWidget
  - StatefulWidget
  - Text
  - Image
  - Button
  - AppBar
  - AlertDialog
  - Icon
  - TextField
  - Form
  - Switch
  - Checkbox

- 布局组件
  - 线性 Row
  - 线性 Column
  - 弹性 Flex
  - 弹性 Expanded
  - 层叠 Stack
  - 层叠 IndexedStack
  - 层叠 Positioned
  - 流式 Flow
  - 流式 Wrap

- 容器组件
  - Scaffold
  - Container
  - Center
  - Padding
  - ConstrainedBox
  - SizedBox
  - DecoratedBox
  - Transform

- 导航组件
  - TabBar
  - NavigationBar
  - PageView

- 可滚动组件
  - CustomScrollView
  - ListView
  - GridView
  - ScrollView
  - ExpansionPanel
  - ScrollController

- 表格组件
  - Table
  - DataTables

- 功能型组件
  - WillPopScope
  - InheritedWidget
  - 主题 Theme

- 事件处理与通知
  - 事件处理
  - 手势识别
  - 全局事件总线
  - 通知消息

- 自定义 Widget
  - 组合其它 Widget
  - 自绘 CustomPaint、Canvas

- 进阶
  - 文件操作
  - Http 请求
  - WebSocket 连接
  - Json 解析
  - 包与插件
  - 国际化
  - 数据库缓存
  - Redux
</code></pre><h2 id="文本组件">文本组件</h2>
<p>Android中用TextView iOS中用UIlable flutter中Text组件</p>
<h3 id="普通文本展示">普通文本展示</h3>
<p>flutter中，文本控制分为两类：</p>
<ul>
<li><strong>控制文本布局的参数</strong>：如对齐方式 textAlign、排版方向 textDirection、显示最大行数 maxLines、阶段规则 overflow等等，这些都是构造函数中的参数；</li>
<li><strong>控制文本样式的额参数</strong>：如字体名称 fontFamily、字体大小 fontSize、文本颜色 color、阴影 shadows等等、这些参数统一封装到了构造函数中的参数style中；</li>
</ul>
<h3 id="富文本">富文本</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>Text.rich(TextSpan(
</span></span><span style="display:flex;"><span><span style="color:#75715e">//      text: &#34;富文本&#34;,
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      children: [
</span></span><span style="display:flex;"><span>        TextSpan(text: <span style="color:#e6db74">&#34;文字&#34;</span>, style: TextStyle(color: Colors.red)),
</span></span><span style="display:flex;"><span>        WidgetSpan(child: Icon(Icons.favorite,color: Colors.red,)),
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// 图片
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      ]
</span></span><span style="display:flex;"><span>    ));
</span></span></code></pre></div><h2 id="按钮button">按钮Button</h2>
<p>必传参数和required 必传参数不传就会报错，编译不过。@required编译可以通过，但会报警告。</p>
<ol>
<li>RaisedButton</li>
<li>FlatButton</li>
<li>OutlineButton 边框按钮</li>
<li>floatingActionButton 浮动按钮</li>
<li>自定义button：图标-文字-背景-圆角</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span>Column(
</span></span><span style="display:flex;"><span>      children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// 1. RaisedButton
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        RaisedButton(
</span></span><span style="display:flex;"><span>          child: Text(<span style="color:#e6db74">&#34;RaisedButton 高地按钮&#34;</span>),
</span></span><span style="display:flex;"><span>          color: Colors.grey,
</span></span><span style="display:flex;"><span>          textColor: Colors.white,
</span></span><span style="display:flex;"><span>          onPressed: ()<span style="color:#f92672">=&gt;</span> print(<span style="color:#e6db74">&#34;dd&#34;</span>),
</span></span><span style="display:flex;"><span>        ),
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// FlatButton
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        FlatButton(
</span></span><span style="display:flex;"><span>            color: Colors.orange,
</span></span><span style="display:flex;"><span>            child: Text(<span style="color:#e6db74">&#34;平坦的Flat 按钮&#34;</span>),
</span></span><span style="display:flex;"><span>            onPressed: ()<span style="color:#f92672">=&gt;</span>print(<span style="color:#e6db74">&#34;flat click&#34;</span>),
</span></span><span style="display:flex;"><span>        ),
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// OutlineButton 边框按钮
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        OutlineButton(
</span></span><span style="display:flex;"><span>          child: Text(<span style="color:#e6db74">&#34;Outline button 边框按钮&#34;</span>),
</span></span><span style="display:flex;"><span>          onPressed: ()<span style="color:#f92672">=&gt;</span>print(<span style="color:#e6db74">&#34;边框按钮&#34;</span>),
</span></span><span style="display:flex;"><span>        ),
</span></span><span style="display:flex;"><span>        <span style="color:#75715e">// 4. floatingActionButton 浮动按钮
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        <span style="color:#75715e">// 5. 自定义button：图标-文字-背景-圆角
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        FlatButton(
</span></span><span style="display:flex;"><span>          color: Colors.purple,
</span></span><span style="display:flex;"><span>            shape: RoundedRectangleBorder(
</span></span><span style="display:flex;"><span>              borderRadius: BorderRadius.circular(<span style="color:#ae81ff">8</span>)
</span></span><span style="display:flex;"><span>            ),
</span></span><span style="display:flex;"><span>            child: Row(
</span></span><span style="display:flex;"><span>              mainAxisSize: MainAxisSize.min,
</span></span><span style="display:flex;"><span>              children: <span style="color:#f92672">&lt;</span>Widget<span style="color:#f92672">&gt;</span>[
</span></span><span style="display:flex;"><span>                Icon(Icons.favorite,color: Colors.red,),
</span></span><span style="display:flex;"><span>                Text(<span style="color:#e6db74">&#34;love范&#34;</span>)
</span></span><span style="display:flex;"><span>              ],
</span></span><span style="display:flex;"><span>            ),
</span></span><span style="display:flex;"><span>          onPressed: (){},
</span></span><span style="display:flex;"><span>        )
</span></span><span style="display:flex;"><span>      ],
</span></span><span style="display:flex;"><span>    );
</span></span></code></pre></div><h2 id="图片">图片</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-dart" data-lang="dart"><span style="display:flex;"><span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_JLHomeContentState</span> <span style="color:#66d9ef">extends</span> State<span style="color:#f92672">&lt;</span>JLHomeContent<span style="color:#f92672">&gt;</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">final</span> imgURL <span style="color:#f92672">=</span>  <span style="color:#e6db74">&#34;https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=116882428,1733900798&amp;fm=26&amp;gp=0.jpg&#34;</span>;
</span></span><span style="display:flex;"><span>  <span style="color:#960050;background-color:#1e0010">@</span>override
</span></span><span style="display:flex;"><span>  Widget build(BuildContext context) {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> Image(
</span></span><span style="display:flex;"><span><span style="color:#75715e">//    1. 在Flutter项目中创建一个文件夹，存储文件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">//    2. 在 pubspec.yaml 进行配置
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">//    3. 使用图片
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>        image:  AssetImage(<span style="color:#e6db74">&#34;assets/images/a_dot_ham.png&#34;</span>)
</span></span><span style="display:flex;"><span>    );
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">ImageDemo01</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">const</span> ImageDemo01({
</span></span><span style="display:flex;"><span>    Key key,
</span></span><span style="display:flex;"><span>    <span style="color:#960050;background-color:#1e0010">@</span>required <span style="color:#66d9ef">this</span>.imgURL,
</span></span><span style="display:flex;"><span>})<span style="color:#f92672">:</span><span style="color:#66d9ef">super</span>(key:key);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">final</span> imgURL;
</span></span><span style="display:flex;"><span>  <span style="color:#960050;background-color:#1e0010">@</span>override
</span></span><span style="display:flex;"><span>  Widget build(BuildContext context) {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> Image(
</span></span><span style="display:flex;"><span>      image: NetworkImage(imgURL),
</span></span><span style="display:flex;"><span>      color: Colors.red,<span style="color:#75715e">// 这里的颜色是混入到图片中
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      colorBlendMode: BlendMode.colorDodge,<span style="color:#75715e">// 设置color混入模式
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      width: <span style="color:#ae81ff">200</span>,
</span></span><span style="display:flex;"><span>      height: <span style="color:#ae81ff">200</span>,
</span></span><span style="display:flex;"><span>      fit: BoxFit.contain,<span style="color:#75715e">// 填充方式
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      repeat: ImageRepeat.repeatY,
</span></span><span style="display:flex;"><span><span style="color:#75715e">//          fitWidth: 宽度一定，高度自适应，
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">//        fitHeight: 高度一定，宽度自适应
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">//        alignment: Alignment.bottomCenter,
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>      alignment: Alignment(<span style="color:#ae81ff">0</span>, <span style="color:#f92672">-</span><span style="color:#ae81ff">1</span>),<span style="color:#75715e">//取值范围 -1,1 中间位置是0，0  自定义
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>    );
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div>
    </article>
  </div>

  
  
  

  
</body>

</html>